<template>
  <div style="background-color: #f6f6f6">
    <el-row>
      <el-col :span="20" :offset="2">
        <div class="form" style="padding-left: 20px;">
          <el-form :inline="true" :model="search" class="dw-form-inline" size="medium">
            <el-form-item label="答者名">
              <el-input v-model="search.key" placeholder="请输入要查询的答卷名字" clearable></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 20px;">
              <el-button type="primary" @click="searchSurveyByKey(search.key)">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table">
          <div class="table-title" >
            <el-row :span="24" type="flex" justify="flex-start" align="middle">
              <el-col :span="4"><h3>收到的问卷</h3></el-col>
<!--              <el-col :span="20" style="text-align: right;">-->
<!--                <el-button type="primary" size="medium" icon="el-icon-plus" plain @click="">删除过期问卷</el-button>-->
<!--              </el-col>-->
            </el-row>
          </div>
          <el-table :data="surveyData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe style="width: 100%"
                    border :default-sort="{prop: 'title', order: 'ascending'}" @sort-change="handleSortChange" :changeKey="changeKey">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column label="id" align="center" v-if="false"></el-table-column>
            <el-table-column label="序号" type="index" width="60" align="center">
              <template v-slot="scope">
                <span>{{ (currentPage - 1) * pageSize + 1 + scope.$index }}</span>
              </template>
            </el-table-column>
            <el-table-column label="问卷名称" prop="title"  align="center" style="width: 150px;"></el-table-column>
            <el-table-column label="问卷描述" prop="introduction"  align="center"style="width: 150px;"></el-table-column>
            <el-table-column label="开始时间" prop="startTime" sortable align="center" style="width: 200px;">
              <template v-slot="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ formatDate(scope.row.startTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="结束时间" prop="endTime" sortable align="center" style="width: 200px;">
              <template v-slot="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ formatDate(scope.row.endTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" sortable align="center" style="width: 80px;"
                             :filters="[{text: '未答', value: 0}, {text: '已答', value: 1}]"
                             :filter-method="filterHandler">
              <template v-slot="scope">
                <el-tag :type="getTagType(scope.row.status)">
                  {{ formatStatus(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作"  align="center">
              <template v-slot="scope">
                <el-tooltip effect="dark" content="回答问卷" placement="top">
                  <el-button size="medium" icon="el-icon-edit" type="primary" circle
                             @click="answererSurvey(scope.row.id)" v-if="scope.row.status==0"></el-button>
                </el-tooltip>
                <el-tooltip effect="dark" content="查看结果" placement="top">
                  <el-button size="medium" icon="el-icon-document" type="danger" circle
                             @click="watchOutcome(scope.row.id)" v-if="scope.row.status==1"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              :page-size="pageSize"
              :current-page="currentPage"
              :total="total"
              :page-sizes="[5,10,20,50]"
              background
              layout="sizes,prev, pager, next"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {queryNeedSurvey} from "../../api/answer";
import {compare, exactDateFormat} from "../../utils/common";

export default {
  name: "answererView",
  data(){
    return {
      changeKey: true,
      search: {
        key: '',
      },
      answererInfo:{},
      surveyData:[],
      pageSize: 5,
      currentPage: 1,
      total: 0

    }
  },
  methods:{
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.currentPage = 1
    },
    watchOutcome(id){
      this.$router.push({
        path:'/answerer/Checkanswer',
        query:{
          surveyId:id,
          answerId:this.answererInfo.id
        }
      })
    },
    answererSurvey(id){
      this.$router.push({
        path:'/answerer/FinishQuestionnaire',
        query:{
          surveyId:id,
        }
      })
      //Todo:答卷
    },
    handleSortChange({prop, order}) {
      this.surveyData.sort(compare(prop, order))
    },
    searchSurveyByKey(key){
      this.queryAllSurvey(key)
    },
    getTagType(status) {
      const map = {
        1: 'success',
        0: 'danger'
      }
      return map[status]
    },
    formatStatus(status) {
      const map = {
        0: '未答',
        1: '已答',
      }
      return map[status]
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] == value;
    },
    formatDate(date){
      return exactDateFormat(date)
    },
    queryAllSurvey(keyword){
      queryNeedSurvey(keyword,this.answererInfo.id).then((response)=>{
        if(response.data.code===200){
          this.surveyData = response.data.data
          this.total = this.surveyData.length
          this.$message.success(response.data.message)
        }else {
          this.$message.warning(response.data.message)
        }
      })

    }

  },
  created() {
    this.answererInfo = JSON.parse(window.sessionStorage.getItem("data"))
    this.queryAllSurvey("")
  }

}
</script>

<style scoped>
.form {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
}

.table {
  background: white;
  padding: 20px;
}

.table.table-title {
  padding-bottom: 20px;
  border-bottom: 1px solid #f3f3f3;
}

.dw-table.dw-table-title h3 {
  padding: 0px;
  margin: 0px;
}

.el-form-item {
  margin-bottom: 0px;
}

.dw-dialog-form-item {
  margin-top: 20px;
}

.pagination {
  padding-top: 20px;
  text-align: right;
}
</style>
